import React from 'react';
import { inject, observer } from 'mobx-react';
import { Spin, Table, Button, Modal, Tooltip } from 'antd';
import { WeaNewScroll, WeaTab, WeaTools, WeaTop, WeaSearchGroup, WeaFormItem, WeaBrowser, WeaDateGroup, WeaInput, WeaSelect, WeaRightMenu, WeaDialog } from 'ecCom';

/**
 * 绩效-考核报表
 * jiansong 2019/6/12
 */
@observer
export default class AccessReport extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      showSearchAd: false,
      isrefesh: false,
      topTab: [],
      yearDatas: [],
      columns: [
        {
          title: '人员', dataIndex: 'username', width: '10%',
          render: (text, record, index) => <div title={text} className="noWrap">{text}</div>
        },
        {
          title: '分部', dataIndex: 'sub', width: '10%',
          render: (text, record, index) => <div title={text} className="noWrap">{text}</div>
        },
        {
          title: '部门', dataIndex: 'dept', width: '10%',
          render: (text, record, index) => <div title={text} className="noWrap">{text}</div>
        },
        {
          title: '1月', dataIndex: 'score', width: '5%',
          render: (text, record, index) => <a title={text} className="noWrap" href="#">{text}</a>
        },
        {
          title: '2月', dataIndex: 'score', width: '5%',
          render: (text, record, index) => <a title={text} className="noWrap" href="#">{text}</a>
        },
        {
          title: '3月', dataIndex: 'score', width: '5%',
          render: (text, record, index) => <a title={text} className="noWrap" href="#">{text}</a>
        },
        {
          title: '4月', dataIndex: 'score', width: '5%',
          render: (text, record, index) => <a title={text} className="noWrap" href="#">{text}</a>
        },
        {
          title: '5月', dataIndex: 'score', width: '5%',
          render: (text, record, index) => <a title={text} className="noWrap" href="#">{text}</a>
        },
        {
          title: '6月', dataIndex: 'score', width: '5%',
          render: (text, record, index) => <a title={text} className="noWrap" href="#">{text}</a>
        },
        {
          title: '7月', dataIndex: 'score', width: '5%',
          render: (text, record, index) => <a title={text} className="noWrap" href="#">{text}</a>
        },
        {
          title: '6月', dataIndex: 'score', width: '5%',
          render: (text, record, index) => <a title={text} className="noWrap" href="#">{text}</a>
        },
        {
          title: '8月', dataIndex: 'score', width: '5%',
          render: (text, record, index) => <a title={text} className="noWrap" href="#">{text}</a>
        },
        {
          title: '9月', dataIndex: 'score', width: '5%',
          render: (text, record, index) => <a title={text} className="noWrap" href="#">{text}</a>
        },
        {
          title: '10月', dataIndex: 'score', width: '5%',
          render: (text, record, index) => <a title={text} className="noWrap" href="#">{text}</a>
        },
        {
          title: '11月', dataIndex: 'score', width: '5%',
          render: (text, record, index) => <a title={text} className="noWrap" href="#">{text}</a>
        },
        {
          title: '12月', dataIndex: 'score', width: '5%',
          render: (text, record, index) => <a title={text} className="noWrap" href="#">{text}</a>
        }
      ],
      datalist: [{ "username": "杨文元", "sub": "国力集团", "dept": "总经办", "score": "5" }],
      menu: [
        {
          key: '0',
          icon: <i className='icon-coms-search' />,
          content: '搜索',
          onClick: key => { },
        }
      ],

      _height: this.getHeight(),
      heightInit: false,
    }
  }
  componentWillMount() {//一些初始化请求
    let ydatas = [];
    for (let i = 2013; i < 2020; i++) {
      ydatas.push({ key: i, showname: i, selected: false });
    }
    this.setState({ yearDatas: ydatas });
  }

  //重置查询条件
  resetSearchAd() {
    cancleSearchAd();
  }
  //搜索
  advanceSearch() {
    cancleSearchAd();
  }
  cancleSearchAd() {
    this.setState({
      showSearchAd: false
    });
  }
  getTabButtonsAd() {
    return [
      (<Button type="primary" onClick={() => this.advanceSearch()}>搜索</Button>),
      (<Button type="ghost" onClick={() => this.resetSearchAd()}>重置</Button>),
      (<Button type="ghost" onClick={() => this.cancleSearchAd(false)}>取消</Button>)
    ]
  }
  showTotal(total) {
    return `共 ${total} 条`;
  }
  showCurrentChange = (current) => {

  }
  onShowSizeChange = (current, pageSize) => {

  }
  onSelectChange = (selectedRowKeys, selectedRows) => {

  }
  getHeight(header) {
    let h = 0;
    if (header) {
      h = header.clientHeight || 0;
    }
    return window.innerHeight - h;
  }
  render() {
    const { showSearchAd, columns, menu, _height, datalist, selectedRowKeys, topTab, yearDatas } = this.state;
    let header = document.getElementsByClassName("e9theme-layout-header")[0];
    if (header && !heightInit) {
      this.setState({ _height: this.getHeight(header), heightInit: true });
    }
    return (
      <div className="wea-workrelate-plan-auditlist" style={{ height: _height }}>
        <WeaRightMenu datas={menu} showUrlItem={false} style={{ height: '100%' }}>
          <WeaTop
            title={<div style={{ display: "inline-block" }}><WeaSelect options={yearDatas} value={"2019"} viewAttr={2} style={{ width: 80, marginRight: 10 }} />月度考核结果</div>}
            icon={<i className='icon-coms-ModelingEngine-o' />}
            iconBgcolor='rgb(150, 53, 138)'
            buttons={[(<Button type='primary' onClick={() => this.advanceSearch()}>搜索</Button>)]}
            showDropIcon={true}
            dropMenuDatas={menu}
          />
          <WeaTab
            datas={topTab}
            searchType={["advanced", "base"]}
            showSearchAd={showSearchAd}
            hideSearchAd={() => this.cancleSearchAd()}
            setShowSearchAd={bool => {
              this.setState({
                showSearchAd: bool
              });
            }}
            buttonsAd={this.getTabButtonsAd()}
          // searchsAd={this.getSearchsAd()}
          />
          <Table columns={columns} bordered={true} scroll={{ y: _height - 220 }} dataSource={datalist} className="wea-develop-antd-table"
            pagination={{
              total: 1,
              onChange: this.showCurrentChange,
              showTotal: this.showTotal,
              current: 1,
              showQuickJumper: true,
              pageSize: 10,
              showSizeChanger: true,
              onShowSizeChange: this.onShowSizeChange
            }} />
        </WeaRightMenu>
      </div>
    )
  }
};